<template>
	<ul class="header">
		<li>
			<router-link to="/">首页</router-link>
		</li>
		<li>
			<!-- <router-link to="/news">新闻</router-link> -->
			<router-link :to="{ name: 'news' }">新闻1</router-link>
		</li>
		<li>
			<router-link to="/user">用户</router-link>
		</li>
	</ul>
	<div class="content">

		<router-view></router-view>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';


export default defineComponent({
	name: 'App',
});
</script>

<style lang="scss">
* {
	margin: 0px;
	padding: 0px;
}

.header {
	width: 100%;
	height: 44px;
	line-height: 44px;
	list-style: none;
	background: #000;
	color: #fff;

	li {
		display: inline-block;
		margin-right: 20px;
		color: #fff;

		a {
			color: #fff;
		}
	}
}

.content {
	padding: 40px;
}
</style>